<template>
	<view class="page">
		<view class="page-date">
			<view class="page-date__left">时间段查询：</view>
			<view class="page-date__right">
				<view class="page-date__right--item" @click="startVisible = true">{{startdate}}</view>
				<view class="page-date__right--center">-</view>
				<view class="page-date__right--item" @click="endVisible = true">{{enddate}}</view>
			</view>
		</view>
		<view class="page-body">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="list__left">
					<text>{{item.ScoreName}}</text>
					<text style="color: #fa8c16;margin-left: 20rpx;">+{{item.ScoreNum}}</text>
				</view>
				<view class="list__right">{{item.CreateTime}}</view>
			</view>
			<view v-if="noData">
				<no-data></no-data>
			</view>
			<view v-if="noMore">
			  <view class="loading-more" style="height: 80rpx;">
			    <text class="loading-more__text">{{loadingText}}</text>
			  </view>
			</view>
		</view>
		
		 <u-datetime-picker
			:show="startVisible"
			v-model="defaultstartdate"
			mode="date"
			@confirm="startConfirm"
			@close="startVisible = false"
			@cancel="startVisible = false"
		></u-datetime-picker>
		<u-datetime-picker
			:show="endVisible"
			v-model="defaultenddate"
			mode="date"
			@confirm="endConfirm"
			@close="endVisible = false"
			@cancel="endVisible = false"
		></u-datetime-picker>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import moment from 'moment'
	import NoData from '@/components/custom/no-data/no-data.vue'
	
	export default {
		components: {
			NoData
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				startdate: moment().format('YYYY-MM-DD'),
				defaultstartdate: moment().format('YYYY-MM-DD'),
				enddate: moment().format('YYYY-MM-DD'),
				defaultenddate: moment().format('YYYY-MM-DD'),
				list: [],
				startVisible: false,
				endVisible: false,
				currentpage: 1,
				pagesize: 20,
				noData: false,
				noMore: false,
				loadingText: '没有更多了'
			}
		},
		onLoad() {
			this.getSubjectUserScoreDetail();
		},
		onReachBottom() {
			if(!this.noMore) {
				this.currentpage += 1;
				this.getSubjectUserScoreDetail();
			}
		},
		methods: {
			init() {
				this.noMore = false;
				this.noData = false;
				this.currentpage = 1;
				this.list = [];
			},
			/**
			 * 获取用户积分明细
			 */
			getSubjectUserScoreDetail() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectUserScoreDetail',
					currentpage: this.currentpage,
					pagesize: this.pagesize,
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
						startdate: this.startdate,
						enddate: this.enddate,
					},
					success(res) {
						if(res.length < that.pagesize) that.noMore = true;
						if(that.currentpage == 1 && !res.length) {
							that.noMore = false;
							that.noData = true;
						}
						that.list.push(...res);
					},
				})
			},
			startConfirm(v) {
				this.startdate = moment(v.value).format('YYYY-MM-DD');
				this.startVisible = false;
				this.init();
				this.getSubjectUserScoreDetail();
			},
			endConfirm(v) {
				this.enddate = moment(v.value).format('YYYY-MM-DD');
				this.endVisible = false;
				this.init();
				this.getSubjectUserScoreDetail();
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #fff;
		
		&-date {
			display: flex;
			align-items: center;
			height: 150rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;
			
			&__left {
				width: 200rpx;
			}
			
			&__right {
				display: flex;
				
				&--item {
					padding: 10rpx 20rpx;
					background-color: #eee;
					border-radius: 20rpx;
				}
				
				&--center {
					margin: 0 20rpx;
					font-size: 40rpx;
				}
			}
			
		}
	}
	
	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		margin: 0 20rpx;
		box-sizing: border-box;
		
		&__right {
			color: #aaa;
		}
	}
	
	.loading-more {
		display: flex;
		flex-direction: row; 
		justify-content: center;
		height: 80rpx;
		align-items: center;
		background-color: #F4F5F6;
		
		&__text {
			font-size: 27rpx;
			color: #aaa;
		}
	}
</style>
